<template>
  <div class="container">
    <h1>增加页面</h1>
    <hr />
    <div class="line">
      <span> 名字：</span>
      <el-input v-model="info.name" placeholder="请输入内容"></el-input>
    </div>
    <div class="line">
      <span> 年纪：</span>
      <el-input v-model="info.age" placeholder="请输入内容"></el-input>
    </div>

    <div class="line">
      <span> 性别：</span>
      <el-input v-model="info.gender" placeholder="请输入内容"></el-input>
    </div>

    <div class="line">
      <span> 电话：</span>
      <el-input v-model="info.phone" placeholder="请输入内容"></el-input>
    </div>

    <button @click="sureAdd(info)">确认增加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: {
        id: "",
        name: "",
        age: "",
        gender: "",
        phone: "",
      },
    };
  },
  mounted() {
    let self = this;
    let temp = self.$store.state.stu;
    let lastId = temp[temp.length - 1].id;
    //   console.log(temp[temp.length-1].id)
    self.info.id = lastId + 1;
  },

  methods: {
    sureAdd() {
      // console.log(self.info)
      this.$store.dispatch("AddInfo", this.info);
      //   跳转回首页

      this.$router.push({ path: "/" });
    },
  },
};
</script>



<style  scoped>
.line {
  display: flex;
}
.container {
  width: 60vw;
  margin: 0 auto;
}
span {
  display: inline-block;
  width: 20%;
}
</style>